<html>
     <head>
         <meta content="Buka Tutup Layar" name="description">
         <meta charset="utf-8">
         <link href="http://dezige-in.blogspot.com/favicon.ico" rel="icon" type="image/x-icon">
         <title>Buka Tutup Layar</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link href="http://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet" type="text/css">
		<link href='http://fonts.googleapis.com/css?family=Bad+Script' rel='stylesheet' type='text/css'/>
        <style type="text/css">
		    * {
                padding: 0;
                margin: 0;
                outline: 0;                                
            }
			 body {
                background:#ebebeb url(http://1.bp.blogspot.com/-DnoiRwz2ZmQ/UORrRzQtmsI/AAAAAAAAALE/tiYmCBENvr0/s1600/egg_shell.png)repeat scroll top left;
                            
            }
.buka-layar {
    width:100%;
    height:100%;
    background:white url(http://3.bp.blogspot.com/-0VbNbbgDhdQ/UsULCgga9PI/AAAAAAAAAig/1TOZh8bBcGY/s1600/ngintip____by_buaiansayapanomali.jpg) no-repeat 50% 50%;
    background-size:100%;
    position:relative;
    margin: 0 auto;
    overflow:hidden;
}
.halaman {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:#ccc;
    z-index:1000;
    -webkit-transition:0.4s;
    transition:0.4s;
}
.halaman p {
    padding:0;
    margin:0;
    font-size:30px;
    color:#ccc;
    text-align:center;
    text-shadow:1px 1px 0 #888;
}
.halaman p a{
    color:white;
	font-size:16px;
	text-decoration:none;
}
.halaman p a:hover{
    color:orange;
}

.buka-layar input {
    position:absolute;
    display:none;
}
.tombol-buka {
    width:50px;
    height:50px;
    position:relative;
    margin:30% auto 0;
    border-radius:5px;
    background:#ccc url(http://dezige-in.googlecode.com/svn/trunk/kupusosial.png) no-repeat 50% 50%;
    background-size:90%;
    box-shadow: -1px -1px 1px #ddd, 1px 1px 1px #888;
}
.tombol-buka:active {
  box-shadow: 1px 1px 1px #ddd, -1px -1px 1px #888;
}
.tombol-buka label {
    display:block;
    width:50px;
    height:50px;
    cursor:pointer;
    position:relative;
}
#dezige-buka-layar:checked ~ .halaman {
    left:100%;
}

        </style>
    </head>
	
    <body>
	<div class="buka-layar">
     <input type="radio" name="deZige Buka Layar" id="dezige-buka-layar">                          
         <div class="halaman">
              <div class="tombol-buka">
              <label for="dezige-buka-layar" title="Open Menu"></label>
              </div>
              <p>deZige<br>Buka Layar<br><a href="http://dezige-in.blogspot.com/2014/01/buka-layar-halaman-dengan-css.html" rel="nofollow">Kembali ke Bahasan</a></p>
         </div>
</div>
    </body>

</html>